<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>07.对原生的dom的绑定</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script type="text/babel">
      class TestHTML extends React.Component {
        constructor() {
          super()
          this.state = {
            avatar: {
              key: "头像",
              value:
                "https://tse3-mm.cn.bing.net/th/id/OIP-C.8olSEek1RZjSQDgPizhxEAHaJ3?w=134&h=180&c=7&r=0&o=5&pid=1.7"
            },
            name: "nickName",
            age: 20,
            isLogin: true,
            hobbies: ["唱", "跳", "rap"],
            customStyle: { color: "red", fontSize: "30px" }
          }
        }

        render() {
          const { avatar, name, age, isLogin, hobbies, customStyle } =
            this.state
          // 方式一添加className
          const localClassName = `abc cba ${isLogin ? "active" : ""}`
          // 方式二添加className
          const classList = ["abc", "cba"]
          if (isLogin) {
            classList.push("active")
          }
          return (
            <div>
              {/* 这里面可以写注释吗*/}
              {/* <div>{avatar}</div>  打不出来，报错，这是对象不允许这样查看*/}
              <img
                src={avatar.value}
                alt={"别闹" + ",没图"}
                title={avatar.key}
              />
              <h3 title={"名字"}>{"名字" + name}</h3>
              <a
                title={"年龄"}
                href={"https://www.baidu.com?age=" + age + "岁"}
              >
                年龄跳去百度查找
              </a>

              <h3 className={localClassName}>方式一添加className</h3>
              <h3 className={classList.join(" ")}>方式二添加className</h3>

              <h3 style={{ color: "red", fontSize: "30px" }}>测试style1</h3>
              <h3 style={customStyle}>
                测试style2，只说过内容转义不能放对象，没说过node.attribute里面不能放对象
              </h3>

              <h3>爱好：</h3>
              {/* <div>{hibbies}</div> 需要挨个加个逗号的后缀，其实可以直接写表达式，不需要建立方法 */}
              <div>
                {hobbies.map((item, index) => (
                  <li>
                    {
                      (item =
                        index !== hobbies.length - 1
                          ? item + ","
                          : item + "...")
                    }
                  </li>
                ))}
              </div>
            </div>
          )
        }
      }

      const root = ReactDOM.createRoot(document.getElementById("root"))
      root.render(<TestHTML />)
    </script>
  </body>
  <style>
    .active {
      width: 200px;
      border: 1px solid;
      padding: 4px 8px;
    }
  </style>
</html>
